
<div id = "form-content"  class="frmcontent">
    <div class="ti-tabs">
        <ul class="idTabs">
            <li><a class="selected" id="Tab01" title="DANH SÁCH QUYỀN USER" href="#Tab-01">DANH SÁCH QUYỀN USER</a></li>
            <li><a class="" id="Tab02" title="CẬP NHẬT LOẠI DANH MỤC" href="#Tab-02">CẬP NHẬT LOẠI DANH MỤC</a></li>
        </ul> 
        <div id="Tab-01" class="content" style="display: none;">
            <form>
                <!-- Tieu chi tim kiem -->
                <div id="frm-search" class="frm">
                    <div>
                        <label>Phòng ban</label>
                        <select id="UnitID" name="UnitID" class="w200">
                          <option value="">--- Chọn phòng ban ---</option>
                          <?= Clound_String::_generateSelectOption($this->arrUnit,'UnitID','UnitID','Name',''); ?>
                        </select>
                        <label class="lb2">Cán bộ</label>
                        <select id="StaffID" name="StaffID" class="w200">
                          <option value="">--- Chọn cán bộ ---</option>
                          <?= Clound_String::_generateSelectOption($this->arrStaff,'StaffID','StaffID','Name',''); ?>
                        </select>

                        <label class="lb2">Quyền</label>
                        <select id="Roles" name="Roles" class="w200">
                          <option value="">--- Chọn quyền ---</option>
                          <?= Clound_String::_generateSelectOption($this->arrPerType,'Code','Code','Name',''); ?>
                        </select>
                    </div>
                </div>
                <div>
                    <div class="button-left">
                        <input type="button" id="refresh" name="refresh" value="Tìm kiếm" />
                    </div>
                    <div class="button-right">
                        <input type="button" id="addrow" name="addrow" value="Thêm mới" />
                        <input type="button" id="editrow" name="editrow" value="Sửa" />
                        <input type="button" id="deleterow" name="deleterow" value="Xóa" />
                        <input type="button" id="cachelisttype" name="cachelisttype" value="Lưu cache" />
                    </div>
                </div>
                <div id="jqxWidget">
                    <div id="jqxgrid"></div>
                </div>
            </form>
        </div>
        <div id="Tab-02" class="content" style="display: none;">
            <form>
                Màn hình sửa
            </form>
        </div>  
    </div>
</div>

<div id='ListMenu'>
    <ul>
        <li id="mn-add">Thêm mới</li>
        <li id="mn-edit">Sửa row đã chọn</li>
        <li id="mn-delete">Xóa row đã chọn</li>
        <li id="mn-cache">Lưu cache</li>
    </ul>
</div>
<script type="text/javascript">
    var dListtype = new System_Admin_Permission({module: 'system', controller: 'permission'}); dListtype.initialize();
    var arrUnit = $.parseJSON('<?= Zend_Json::encode($this->arrUnit)?>')
        ,arrStaff = $.parseJSON('<?= Zend_Json::encode($this->arrStaff)?>');

      var objGrid = $('#jqxgrid');
     $(function(){
        $(".idTabs").idTabs();
        // prepare the data
        var theme = 'energyblue';
        $('#listBoxgridpagerlistjqxgrid').remove();
        var source ={
              datatype: "json",
              datafields: [
                {name: 'PermissionID', type: 'string'},
                {name: 'StaffID', type: 'string'},
                {name: 'StaffName', type: 'string'},
                {name: 'Roles', type: 'string'},
                {name: 'Default', type: 'string'},
              ],
              url: baseUrl + '/system/listtype/data',
              // id: 'ListtypeID',
              // root: 'Rows',
              cache: false,
              filter: function(){
                // update the grid and send a request to the server.
                $(objGrid).jqxGrid('updatebounddata', 'filter');
              },
              sort: function(){
                // update the grid and send a request to the server.
                $(objGrid).jqxGrid('updatebounddata', 'sort');
              },
              root: 'Rows',
              beforeprocessing: function(data){
                source.totalrecords = data[0].TotalRows;
              },
              deleterow: function(rowid, commit) {
                commit(true);
              }
        };
        var dataadapter = new $.jqx.dataAdapter(source, {
              loadError: function(xhr, status, error){
                  alert(error);
              }
            }
        );
        $(objGrid).on('bindingcomplete', function(event) {
            $(this).jqxGrid('localizestrings', dLayout._CONST.localizationobj);
             $(objGrid).jqxGrid("clearselection");
          }).on("pagesizechanged", function (event){
            // var args = event.args; 
            // var pagenum = args.pagenum;
            // var oldpagesize = args.oldpagesize;
            // var pagesize = args.pagesize;
        });   
        $(objGrid).on('rowclick', function(event) {
            if (event.args.rightclick) {
            $(objGrid).jqxGrid('selectrow', event.args.rowindex);
                    var scrollTop = $(window).scrollTop();
                    var scrollLeft = $(window).scrollLeft();
                    contextMenu.jqxMenu('open', parseInt(event.args.originalEvent.clientX) + 5 + scrollLeft, parseInt(event.args.originalEvent.clientY) + 5 + scrollTop);
                    return false;
            }
        });
        // initialize jqxGrid
        $(objGrid).jqxGrid({
            source: dataadapter,
            theme: theme,
            // filterable: true,
            // showfilterrow: true,
            // sortable: true,
            virtualmode: true,
            pagermode: "default",
            pagesizeoptions: ['15', '30', '50'],
            pageable: true,
            width: '100%',
            height: '425',
            autorowheight:false,
            autoheight: true,
            ready: function(){
            },
            rendergridrows: function(obj){
              return obj.data;
            },
            pagesize: 15,
            enablebrowserselection: true,
            selectionmode: 'multiplerowsextended',
            altrows: true,
            columns: [
                      {text: 'PermissionID', datafield: 'PermissionID', width: 10, hidden: true, viewable: true, editrules: {edithidden: true}},
                       {text: 'StaffID', datafield: 'StaffID', width: 10, hidden: true, viewable: true, editrules: {edithidden: true}},
                      {text: 'Tên cán bộ', datafield: 'StaffName', width: '30%'},
                      {text: 'Quyền xử lý', datafield: 'Roles', width: '40%'},
                      {text: 'Mặc định', datafield: 'Default', width: '10%', cellsalign: 'center'},
                    ]
            });
    // create context menu
    // $('#menuWrapperListMenu').remove(); 
    $('.jqx-menu-wrapper').remove();
    // jqx-menu-wrapper
    var contextMenu = $("#ListMenu").jqxMenu({width: 200, height: 'auto', autoOpenPopup: false, mode: 'popup'});
    $(objGrid).on('contextmenu', function() {
          return false;
    });
    // handle context menu clicks.
    $("#ListMenu").on('itemclick', function(event) {
        var args = event.args;
        var rowindex = $(objGrid).jqxGrid('getselectedrowindex');
        switch($.trim($(args).attr('id'))){
          case 'mn-add':
            $('#addrow').trigger('click');
            break;
          case 'mn-edit':
            $(objGrid).jqxGrid('selectrow', rowindex);
            $('#editrow').trigger('click');
            break;
          case 'mn-delete':
            var rowid = $(objGrid).jqxGrid('getrowid', rowindex);
            var ListtypeID = dListtype.obGridView.jqxGrid('getrowdata', rowindex).ListtypeID;
            $.post(dListtype.urlPath + '/delete', {ListtypeIDList: ListtypeID}, function(data) {
                   dListtype.obGridView.jqxGrid('deleterow', rowid);
            });
            break;
          case 'mn-cache':
            $('#cachelisttype').trigger('click');
            break;
        }        
    });
  });

</script>
